<script lang="ts" setup>

</script>

<template>
  <view class="container">
    <view class="user">
      <view class="header">
        <view class="avatar">
          <up-avatar src="/static/image/编组 2@2x.png"></up-avatar>
        </view>
        <view class="menu">
          <up-icon color="#fff" name="phone-fill" size="28rpx"></up-icon>
          <up-icon color="#fff" name="share-fill" size="28rpx"></up-icon>
        </view>
      </view>
      <view class="userinfo">
        <up-text :suffix-icon="`10009000`" color="#fff" icon-style="font-size:24rpx;color:#fff;margin-left:32rpx"
                 size="32rpx"
                 text="张晓栀"></up-text>
        <up-text color="#fff" margin="12rpx 0" text="艺术学院/艺术设计"></up-text>
      </view>
      <up-divider dashed style="width: 100%;"></up-divider>
      <view class="footer">
        <view class="left">
          <view class="manager">
            <up-text color="rgba(255,255,255,.5)" margin="12rpx 0" text="管理标签"></up-text>
            <up-text bold color="#fff" size="40rpx" text="2024"></up-text>
          </view>
          <view class="data">
            <up-text color="rgba(255,255,255,.5)" margin="12rpx 0" text="数据标签"></up-text>
            <up-text bold color="#fff" size="40rpx" text="1094"></up-text>
          </view>
        </view>
        <view class="right">
          <up-button shape="circle" style="background: #00FBFF;">
            <span style="font-size:28rpx;color: #4C4C9F;font-weight: 600;">添加标签</span>
          </up-button>
        </view>
      </view>
    </view>
  </view>
</template>


<style lang="scss" scoped>
.container {
  padding-top: 80rpx;
  height: 100vh;

  .user {
    position: relative;;
    width: 686rpx;
    height: 340rpx;
    margin: 0 auto;
    background: url('/static/image/person/bg@2x.png') center no-repeat;
    background-size: contain;
    border-radius: 20rpx;
    padding: 30rpx;
    color: #fff;

    .header {
      height: 40rpx;

      .avatar {
        position: absolute;
        width: 96rpx;
        height: 96rpx;
        top: -48rpx;
        left: 18rpx;
      }

      .menu {
        position: absolute;
        right: 20rpx;
        top: 10rpx;
        width: 70rpx;
        display: flex;
        justify-content: space-between;
      }
    }

    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 102rpx;

      .left {
        width: 274rpx;
        display: flex;
        justify-content: space-between;
      }

      .right {

      }
    }
  ;
  }
}
</style>
